<template>


    <div style="height: 100% ;height: 100%; border: 1px solid brown; " :style="{backgroundImage:backgroundImage}">




        <div style="margin-left: 50%"><h1>商家注册界面</h1></div>
        <div style="width: 50% ;height: 55%; border: 1px solid; background: #3effa2;
    position: absolute;  top: 200px;left: 500px; right: 500px; bottom: 50px; " >
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="margin-top: 60px">

                <el-form-item label="账号" prop="username" style="width: 500px">
                    <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass" style="width: 500px">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass" style="width: 500px">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone" style="width: 500px">
                    <el-input type="phone" v-model="ruleForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input v-model="ruleForm.code" style="width: 200px" ></el-input>
                    <el-button v-show="Verification" @click="handleClick" type="primary">点击获取验证码</el-button>
                    <el-button v-show="!Verification" type="primary"><span>{{timer}}</span>秒后重新获取</el-button>

                </el-form-item>
                <div style="margin-left: 50px">
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </div>
            </el-form>

        </div>
    </div>
</template>

<script>
    export default {
        name:"register",
        data() {

            var validatePassUser = (rule, value, callback) =>{
                if (!value) {
                    return callback(new Error('用户名不能为空'));
                }else if(value.length<2){
                    return callback(new Error('用户名不能少于2位'));
                }else{
                    callback();
                }
            }
            var checkAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入手机验证码'));
                }

            };
            var   checkPhone= (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入手机号码'));
                } else if (value.length !=11) {
                    return callback(new Error('请输入11位手机号码'));
                } else {
                    callback();
                }
            }
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            //验证验证码
            var  checkCode =  (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入验证码'));
                } else  if(value !=this.codeNumber){
                    callback(new Error('请输入正确验证码'));

                }else{
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            return {
                  codeNumber:'',
                backgroundImage: 'url(' +require('@/assets/register_icon.jpg') + ')',
                Verification:true,    //通过v-show控制显示获取还是倒计时
                timer:60  ,    //定义初始时间为60s
                ruleForm: {
                    username:'',
                    pass: '',
                    checkPass: '',
                    age: '',
                    phone:'',
                    code:''
                },
                rules: {
                    username:[
                        { validator: validatePassUser, trigger: 'blur' }
                    ],
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    age: [
                        { validator: checkAge, trigger: 'blur' }
                    ],
                    phone:[{
                        validator: checkPhone, trigger: 'blur'
                    }],
                    code:[{
                        validator: checkCode, trigger: 'blur'
                    }]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const query = Bmob.Query('merchantsInfo');
                        query.set("username",this.ruleForm.username)
                        query.set("password",this.ruleForm.pass)
                        query.set("status","0")
                        query.save().then(res => {
                            this.$message({
                                type: 'info',
                                message: '添加成功'
                            });
                            this.$router.push( {path : "/"})
                        }).catch(err => {
                            this.$message({
                                type: 'info',
                                message: '添加失败'
                            });
                        })
                    } else {
                        this.$message({
                            type: 'info',
                            message: '访问数据库错误'
                        });
                        return false;
                    }
                });
            },
            //清空表信息
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //获取手机验证码
            handleClick(){
  var that = this
              that.codeNumber ="123456"

                //去第三方下载验证码
                // Bmob.Sms.requestSmsCode({"mobilePhoneNumber": this.ruleForm.phone} ).then(function(obj) {
                //     that.codeNumber =obj.smsId
                //     //alert("smsId:"+obj.smsId); //
                // }, function(err){
                //     alert("发送失败:"+err);
                // });
                console.log(this.ruleForm.phone)
                this.Verification = false;      //点击button改变v-show的状态
                let auth_timer = setInterval(()=>{  //定时器设置每秒递减
                    this.timer--;        //递减时间
                    if(this.timer<=0){
                        this.Verification = true;    //60s时间结束还原v-show状态并清除定时器
                        clearInterval(auth_timer)
                    }
                },1000)
            },

        }

    }
</script>
<style scoped>

</style>